<template>
  <div class="root">
    <category>
      <!-- <template scope="shiwu"> -->
      <!-- 解构赋值 -->
      <template scope="{demo,demo2}">
        <ul slot="center">
          <!-- <li v-for="(item,index) in shiwu.demo.content" :key="index">{{item}}</li> -->
          <!-- 解构赋值了能直接用demo -->
          <li v-for="(item,index) in demo.content" :key="index">{{item}}</li>
        </ul>
        <h3>
          {{demo2}}
        </h3>
      </template>
    </category>
    <category>
      <!-- 这个是新的写法，一样的 -->
      <template slot-scope="shiwu">
        <ul slot="center">
          <li style="color:red" v-for="(item,index) in shiwu.demo.content" :key="index">{{item}}</li>
        </ul>
      </template>
    </category>

  </div>
</template>

<script>

import category from './components/category.vue'
export default {
  name: 'App',
  components: {
    category
  },
  data () {
    return {

    }
  },

}
</script>

<style>
.root {
  margin: 100px auto;
  width: 800px;
  display: flex;
  justify-content: space-around;
}
.game,
.movie,
.food,
.demo {
  display: flex;
  justify-content: space-around;
}
</style>